<template>
	<view>
		<view class="login">
			<image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
			<view class="userInfoInput">
				账号:<input @input="accountChange">
			</view>
			<view class="userInfoInput">
				密码:<input password="true" @input="passwordChange">
			</view>

			<view class="userInfoInput" style="font-size: x-small;">注：若无账号，请输入9-12位账号、大于6位密码后点击注册再登录</view>

			<view class="detail">
				<view class="send" style="background-color: blue;" @click="loginOrRegister('register')">
					注册
				</view>
				<view class="send" style="background-color: #41A863;" @click="loginOrRegister('login')">
					登录
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		socket
	} from '../../utils/socket.js'
	export default {
		data() {
			return {
				userId: "",
				account: "",
				password: "",
				token: ""
			}
		},
		methods: {
			accountChange(e) {
				this.account = e.detail.value;
			},
			passwordChange(e) {
				this.password = e.detail.value;
			},
			// 登录or注册
			loginOrRegister(e) {
				if (e == "register") {
					if (this.account.length < 9 || this.account.length > 12) {
						uni.showToast({
							icon: "none",
							title: "账号的长度为9-12位"
						})
					} else if (this.password.length < 6) {
						uni.showToast({
							icon: "none",
							title: "密码必须大于六位"
						})
					} else {
						uni.request({
							url: getApp().url + 'user/register',
							data: {
								account: this.account,
								password: this.password
							},
							method: "POST",
							success: (response) => {
								if (response.data.code == 0) {
									return uni.showToast({
										icon: "success",
										title: "注册成功",
									});
								};
								uni.showToast({
									icon: "error",
									title: response.data.msg
								});
							},
							fail: (error) => {
								console.log(error);
							}
						})
					}

				} else if (e == "login") {
					uni.request({
						url: getApp().url + 'user/login',
						data: {
							account: this.account,
							password: this.password
						},
						method: "GET",
						success: (response) => {
							if (response.data.code == 0) {
								this.userId = response.data.data.userId;
								this.token = response.data.data.token;
								uni.setStorageSync("userId", response.data.data.userId);
								uni.setStorageSync("token", response.data.data.token);
								uni.setStorageSync("image", response.data.data.image);
								uni.setStorageSync("groupList", response.data.data.groupList);
								uni.setStorageSync("name", response.data.data.name);
								uni.setStorageSync("enterprise", {
									enterpriseId: 0
								});
								this.goToPersonIndex()
							} else {
								uni.showToast({
									icon: "error",
									title: response.data.msg
								});
							}

						},
						fail: (error) => {
							console.log(error);
						}
					})

				}
			},
			goToPersonIndex() {
				socket.startWebSocket(getApp().wurl + uni.getStorageSync("userId") + '/' + uni
					.getStorageSync("token"))
				uni.switchTab({
					url: "/pages/person/index/index"
				})

			}
		}
	}
</script>

<style lang="scss">
	.login {
		height: 60vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.userInfoInput {
			width: 60vw;
			height: 50px;
			display: flex;
			align-items: center;

			input {
				border: 1px solid #B3B2AF;
			}
		}

		.logo {
			width: 30vw;
			height: 30vw;
		}
	}

	.detail {
		margin: 8vw 5vw;
		height: 40px;
		display: flex;

		.send {
			margin: 0 5vw;
			width: 25vw;
			height: 50px;
			border-radius: 25px;
			line-height: 50px;
			text-align: center;
			color: #FFF;
		}
	}
</style>